<template>
  <div class="aside-menu">
    <div
      :class="$route.name === menuKeys[index] ? 'item selected' : 'item'"
      v-for="(item, index) in menuValues"
      :key="index"
      @click="handleMenuClick(index)">
      {{ item }}
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
// 页面数据
const router = useRouter();
const menu = {
  websiteinfo: "网站监控",
  friendmessage: "网友留言",
  contentadmin: "内容管理",
  pubarticle: "发布文章",
  prejectadmin: "项目管理"
};
const menuKeys = Object.keys(menu);
const menuValues = Object.values(menu);
// 事件处理
const handleMenuClick = (index) => {
  switch (menuValues[index]) {
    case "网站监控":
      router.push({ path: "/perhome" });
      break;
    case "网友留言":
      router.push({ path: "/perhome/friendmessage" });
      break;
    case "内容管理":
      router.push({ path: "/perhome/contentadmin" });
      break;
    case "发布文章":
      router.push({ path: "/perhome/pubarticle" });
      break;
    case "项目管理":
      router.push({ path: "/perhome/prejectadmin" });
      break;
  }
};
</script>

<style scoped>
.aside-menu {
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: #ddd;
}
.item {
  padding: 0 20px;
  width: 100%;
  height: 60px;
  line-height: 60px;
  box-sizing: border-box;
  font-size: 18px;
  cursor: pointer;
  user-select: none;
}

.item:hover {
  background-color: #ededed;
  font-weight: 560;
}

.selected {
  color: #fc6d59;
}
</style>
